<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
        >新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['system:role:remove']"
        >删除
        </el-button>
      </el-col>
      <el-table :data="notableList" @selection-change="handleSelectionChange">
        <el-table-column type="selection"  align="center"  width="55"/>
        <el-table-column label="图片编号"  align="center"  prop="notableId"/>
        <el-table-column label="图片预览(点击图片可放大预览)" align="center" >
          <template v-slot="scope">
            <el-image
              style="width: 300px; height: 100px"
              :src="scope.row.notableAddress"
              :preview-src-list="srcList"
            >
            </el-image>
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope" v-if="scope.row.roleId !== 1">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              v-hasPermi="['system:role:remove']"
            >删除
            </el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
            >更换图片</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page-sizes=[5,10,15]
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </el-row>



    <!--    上传图片-->
    <el-dialog :title="title_1" :visible.sync="open_1" width="500px" append-to-body>
      <el-form ref="form" :model="form" label-width="80px">
        <div style="padding-bottom: 30px">
          <el-select v-model="uploadForm.data.notableProperty" placeholder="请选择图片展示区域">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>

        <el-upload
          ref = "upload"
          :action = "uploadForm.data.img_1"
          list-type="picture-card"
          :auto-upload = false
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :on-success = "handleSuccess"
          :data="uploadForm.data"
          :headers = "uploadForm.headers"
          :limit="2"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <!--        悬浮界面，删除和预览-->
        <el-dialog :visible.sync="dialogVisible">
          <!--          预览大图片展示区域-->
          <img width="100%" :src="dialogImageUrl" alt/>
        </el-dialog>
      </el-form>
      <div style="padding-top: 30px;">
        <el-button type="primary" @click="submitForm">提交</el-button>
      </div>
    </el-dialog>
    <!--    更换图片-->
    <el-dialog :title="title_2" :visible.sync="open_2" width="500px" append-to-body>
      <el-form ref="form" :model="form" label-width="80px">

        <el-upload
          ref = "upload"
          :action = "uploadForm.data.img_2"
          list-type="picture-card"
          :auto-upload = false
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :on-success = "handleSuccess_1"
          :data="uploadForm.data"
          :headers = "uploadForm.headers"
          :limit="1"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <!--        悬浮界面，删除和预览-->
        <el-dialog :visible.sync="dialogVisible">
          <!--          预览大图片展示区域-->
          <img width="100%" :src="dialogImageUrl" alt/>
        </el-dialog>
      </el-form>
      <div style="padding-top: 30px;">
        <el-button type="primary" @click="submitForm_1">点击更换图片</el-button>
      </div>
    </el-dialog>
  </div>


</template>

<script>
  import { listNotable, delNotable } from '../../../api/xiaomi-mall/notable'
  import {getToken} from '../../../utils/auth'

  export default {
    name: 'Notable',
    data() {
      return {
        // 下拉框
        options: [{
          value: 1,
          label: '走马灯区域'
        }, ],
        value: '',
        // 表单参数
        form: {},
        // 上传图片
        dialogImageUrl: '',
        dialogVisible: false,
        // 遮罩层
        loading: true,
        // 上传图片框显示
        open_1: false,
        // 上传图片框显示
        open_2: false,
        // 弹出层标题
        title_1: '',
        // 弹出层标题
        title_2: '',
        //走马灯图片数据
        notableList: [],
        // 走马灯图片地址
        srcList: [],
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 5,
          notableId: undefined ,
        },
        // 总条数
        total: 0,
        //上传图片
        uploadForm: {
          headers: { Authorization: "Bearer " + getToken() },
          data: {
            notableProperty: '',
            notableId:'',
            img_1: process.env.VUE_APP_BASE_API + '/xiaomi-mall/notable/addPicture',
            img_2: process.env.VUE_APP_BASE_API + '/xiaomi-mall/notable/updatePicture',
          }
        }
      }
    },
    methods: {
      handleRemove(file, fileList) {
        console.log(file, fileList)
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url
        this.dialogVisible = true
      },
      handleSuccess(){
        this.$modal.msgSuccess("添加成功");
        this.open_1 = false;
        this.getList();
      },
      handleSuccess_1(){
        this.$modal.msgSuccess("更换图片成功");
        this.open_2 = false;
        this.getList();
      },
      /** 提交按钮 */
      submitForm: function() {
        if (!this.uploadForm.data.notableProperty){
           return this.$modal.msgError("图片展示区域不能为空");
        }{
          this.$refs.upload.submit();
        }

      },
      /** 更换图片按钮 */
      submitForm_1: function() {
        this.$refs.upload.submit();
      },
      getList() {
        listNotable(this.queryParams).then(response => {
          this.notableList = response.rows;
          this.total = response.total;
          for (let notetable of this.notableList) {
            notetable.notableAddress = process.env.VUE_APP_BASE_API + notetable.notableAddress
            this.srcList.push(notetable.notableAddress)
          }
        })
      },
      /** 多选框选中数据 */
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.notableId)
        this.single = selection.length != 1
        this.multiple = !selection.length
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const notableIds = row.notableId || this.ids
        this.$modal.confirm('是否确认删除图片编号为"' + notableIds + '"的数据项？').then(function() {
          return delNotable(notableIds)
        }).then(() => {
          this.getList()
          this.$modal.msgSuccess('删除成功')
        }).catch(() => {})
      },
      /** 修改按钮操作 */
      handleUpdate(row){
        this.uploadForm.data.notableId = row.notableId
        this.open_2 = true
        this.title_2 = '更换图片'
      },
      /** 增加按钮操作 */
      handleAdd() {
        this.open_1 = true
        this.title_1 = '添加图片'
      }

    },
    created() {
      this.getList()
    }
  }
</script>

<style scoped>

</style>
